<script setup lang="ts">
import { onMounted } from "vue";
import { ref } from "vue";
import router from "../../router/index";

onMounted(() => {
  init();
});

const settings = ref([{ id: 0, name: "设置MOD", code: "modSetting" }]);
const activeCode = ref("");

const init = () => {
  activeCode.value = settings.value[0].code;
  console.log("show ", activeCode.value);
  router.push(`/setting/${activeCode.value}`);
};
</script>
<template>
  <div class="setting">
    <aside>
      <ul>
        <li
          v-for="item in settings"
          :key="item.id"
          :class="{ active: activeCode === item.code }"
        >
          {{ item.name }}
        </li>
      </ul>
    </aside>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<style scoped lang="scss">
.setting {
  display: flex;
  aside {
    width: 160px;
    min-height: 100vh;
    ul {
      height: 100%;
      border-right: 1px solid black;
      li {
        padding: 0 15px;
        line-height: 30px;
        &:hover,
        &.active {
          color: #eee;
          cursor: pointer;
          background-color: #345345;
        }
      }
    }
  }
}
</style>
